<template>
  <div :style="styleObj">
    <superslide v-if="hackReset" :options="options" class="txtScroll-top">
      <!--表头-->
      <div class="title">
        <div v-if="optionsSetUp.ranking" :style="{...headerTableStlye, width: '60px',flex: 'none' }">排行</div>
        <div
          v-for="(item, index) in header"
          :style="{...headerTableStlye, flex: item.width }"
          :key="index"
        >
          {{ item.name }}
        </div>
      </div>
      <!--数据-->
      <div class="bd">
        <ul class="infoList">
          <li v-for="(item, index) in list" :key="index" :style="bodyLiStyle">
            <div v-if="optionsSetUp.ranking" :style="[{...bodyTableStyle, width: '60px', flex: 'none' }, bodyTable(item, index)]"><span :style="paiming(index)">{{index + 1}}</span></div>
            <div
              v-for="(itemChild, idx) in header"
              :key="idx"
              :style="[{...bodyTableStyle, flex: itemChild.width }, bodyTable(item, index, itemChild)]"
            >
              {{ item[itemChild.key] }}
            </div>
          </li>
        </ul>
      </div>
    </superslide>
  </div>
</template>
<script>
import vue from "vue";
import VueSuperSlide from "vue-superslide";
import { queryEchartsData } from "@/api/bigscreen";
vue.use(VueSuperSlide);
export default {
  props: {
    value: Object,
    ispreview: Boolean
  },
  data() {
    return {
      hackReset: true,
      options: {
        titCell: ".hd ul",
        mainCell: ".bd ul",
        effect: "topLoop",
        autoPage: true,
        //effect: "top",
        autoPlay: true,
        vis: 5
      },
      header: [],
      list: [],
      optionsSetUp: {},
      optionsPosition: {},
      optionsData: {}
    };
  },
  computed: {
    styleObj() {
      const allStyle = this.optionsPosition;
      return {
        position: this.ispreview ? "absolute" : "static",
        width: allStyle.width + "px",
        height: allStyle.height + "px",
        left: allStyle.left + "px",
        top: allStyle.top + "px",
        background: this.optionsSetUp.tableBgColor
      };
    },
    headerTableStlye() {
      const headStyle = this.optionsSetUp;
      return {
        "font-size": headStyle.fontSize + "px",
        "border-top-style": headStyle.isLinecheckbox.indexOf('top') !== -1 ? headStyle.isLine : 'none',
        "border-bottom-style": headStyle.isLinecheckbox.indexOf('bottom') !== -1 ? headStyle.isLine : 'none',
        "border-left-style": headStyle.isLinecheckbox.indexOf('left') !== -1 ? headStyle.isLine : 'none',
        "border-right-style": headStyle.isLinecheckbox.indexOf('right') !== -1 ? headStyle.isLine : 'none',
        "border-width": headStyle.borderWidth + "px",
        "border-color": headStyle.borderColor,
        display: headStyle.isHeader ? "block" : "none",
        color: headStyle.headColor,
        "background-color": headStyle.headBackColor,
        "padding": "10px",
        "display": "flex",
        "align-items": "center",
        "min-height": '50px',
        "justify-content": headStyle.textAlign,
      };
    },
    bodyLiStyle() {
      const bodyStyle = this.optionsSetUp;
      return {
        "height": bodyStyle.lineHeight + 'px',
      }
    },
    bodyTableStyle() {
      const bodyStyle = this.optionsSetUp;
      return {
        "font-size": bodyStyle.fontSize + "px",
        "border-top-style": bodyStyle.isLinecheckbox.indexOf('top') !== -1 ? bodyStyle.isLine : 'none',
        "border-bottom-style": bodyStyle.isLinecheckbox.indexOf('bottom') !== -1 ? bodyStyle.isLine : 'none',
        "border-left-style": bodyStyle.isLinecheckbox.indexOf('left') !== -1 ? bodyStyle.isLine : 'none',
        "border-right-style": bodyStyle.isLinecheckbox.indexOf('right') !== -1 ? bodyStyle.isLine : 'none',
        "border-width": bodyStyle.borderWidth + "px",
        "border-color": bodyStyle.borderColor,
        "background-color": bodyStyle.tableBgColor,
        "display": "flex",
        "align-items": "center",
        "justify-content": bodyStyle.textAlign,
        "padding": "10px",
        "flex": 1
      };
    }
  },
  watch: {
    value: {
      handler(val) {
        this.optionsSetUp = val.setup;
        this.optionsPosition = val.position;
        this.optionsData = val.data;
        this.initData();
      },
      deep: true
    }
  },
  mounted() {
    this.optionsSetUp = this.value.setup;
    this.optionsPosition = this.value.position;
    this.optionsData = this.value.data;
    this.initData();
  },
  methods: {
    initData() {
      this.handlerRollFn();
      this.handlerHead();
      this.handlerData();
      this.visConfig();
    },
    visConfig(){
      this.options.vis = this.optionsSetUp.vis;
    },
    handlerRollFn() {
      const options = this.options;
      const rollSet = this.optionsSetUp;
      options.autoPlay = rollSet.isRoll;
      options.delayTime = rollSet.rollTime;
      options.scroll = rollSet.rollNumber;
      this.options = options;
      this.hackResetFun();
    },
    handlerHead() {
      const head = this.optionsSetUp.dynamicAddTable;
      this.header = head;
    },
    handlerData() {
      const tableData = this.optionsData;
      tableData.dataType == "staticData"
        ? this.handlerStaticData(tableData.staticData)
        : this.handlerDymaicData(tableData.dynamicData, tableData.refreshTime);
    },
    handlerStaticData(val) {
      if(typeof val === 'string') {
        val = JSON.parse(val)
      }
      this.list = val;
    },
    handlerDymaicData(val, refreshTime) {
     // 如果没有请求参数不调接口
      let isQuery = val && val.url && val.dataMethod
      if (!isQuery) return;
      if (this.ispreview) {
        this.getEchartData(val);
        if(refreshTime === 0) return
        this.flagInter = setInterval(() => {
          this.getEchartData(val);
        }, refreshTime);
      } else {
        this.getEchartData(val);
      }
    },
    getEchartData(val) {
      // console.log('动态数据请求参数：', JSON.parse(JSON.stringify(val)));
      queryEchartsData(val)
        .then(res => {
          // console.log('参数请求回来了', JSON.parse(JSON.stringify(res)));
          if (res.tx_status !== "00") return;
          this.list = res.data;
          this.hackResetFun();
        })
        .catch((err) => {
          this.$message.error(err);
        });
    },
    // vue hack 之强制刷新组件
    hackResetFun() {
      this.hackReset = false;
      this.$nextTick(() => {
        this.hackReset = true;
      });
    },
    // 计算 奇偶背景色
    bodyTable(item, index, itemChild) {
      if (index % 2) {
        return {
          "background-color": this.optionsSetUp.eventColor,
          "color": item.color ? item.color : itemChild ? itemChild.color === '#fff' ? this.optionsSetUp.bodyColor : itemChild.color : this.optionsSetUp.bodyColor,
        };
      } else {
        return {
          "background-color": this.optionsSetUp.oldColor,
          "color": item.color ? item.color : itemChild ? itemChild.color === '#fff' ? this.optionsSetUp.bodyColor : itemChild.color : this.optionsSetUp.bodyColor,
        };
      }

    },
    // 排名样式
    paiming(index){
      if(index === 0) {
        return {
          width: "30px",
          height: "30px",
          background: "#00ffff",
          "border-radius": "100%",
          "text-align": "center",
          "line-height": "30px",
        }
      } else if(index === 1) {
        return {
          width: "30px",
          height: "30px",
          background: "#ffa100",
          "border-radius": "100%",
          "text-align": "center",
          "line-height": "30px",
        }
      } else if(index === 2){
        return {
          width: "30px",
          height: "30px",
          background: "#0091ff",
          "border-radius": "100%",
          "text-align": "center",
          "line-height": "30px",
        }
      }
    }
  }
};
</script>
<style lang="less" scoped>
/* 本例子css */
.txtScroll-top {
  overflow: hidden;
  position: relative;
}

.title {
  display: flex;

}

.txtScroll-top .bd {
  width: 100%;
}

.txtScroll-top .infoList li {
  display: flex;
}

// .infoList li div:nth-child(1) span {
//   width: 30px;
//   height: 30px;
//   background: #144280;
//   border-radius: 100%;
//   text-align: center;
//   line-height: 30px;
// }

// .infoList li:nth-child(1) div:nth-child(1) span {
//   width: 30px;
//   height: 30px;
//   background: #00ffff;
//   border-radius: 100%;
//   text-align: center;
//   line-height: 30px;
// }

// .infoList li:nth-child(2) div:nth-child(1) span {
//   width: 30px;
//   height: 30px;
//   background: #ffa100;
//   border-radius: 100%;
//   text-align: center;
//   line-height: 30px;
// }

// .infoList li:nth-child(3) div:nth-child(1) span {
//   width: 30px;
//   height: 30px;
//   background: #0091ff;
//   border-radius: 100%;
//   text-align: center;
//   line-height: 30px;
// }
</style>
